<template>
    <div class="wrapper">
        <router-link to="/info" class="link">
            <div class="img">
                <img src="../../../assets/images/tongzhi.jpg" alt="" class="avatar">
            </div>
            <div class="text">
                <p class="name">通知</p>
                <div class="desc">
                    <p class="detail">欢迎亲爱的新趣粉宝宝</p>
                    <span class="time">| 18小时前</span>
                </div>
            </div>
        </router-link>
        <HomeFooter ></HomeFooter>
    </div>
</template>
<script>
    import HomeFooter from '../../../pages/home/components/Footer'
    import {mapActions} from 'vuex'
    export default {
        name: 'MeaasgeInform',
        components: {
            HomeFooter
        }
    }
</script>
<style lang="css" scoped>
    .wrapper{
        width: 100%;
        background-color: #fff;
    }
    .link {
        width: 100%;
        height: 2rem;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-decoration: none;
        color: #000;
        padding: 0 0;
        border-bottom: 1px solid #f7f7f7;
    }
    .link .img {
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .img img {
      width: 47px;
      height: 47px;
    }
    p{
        margin: 0;
        padding: 0;
    }
    .text {
        margin-left: .5rem;
    }
    .text .name {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: .2rem;
    }
    .desc {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        font-size: 15px;
        color: #888;
    }
    .time {
        margin-left: 0;
    }
</style>
